import React, { useState, useEffect } from 'react';
import HOCSelect from '@/components/AntDesign/Select';
import { Modal, Form, Checkbox, message } from 'antd';

const AutoModal = props => {
  const {
    title,
    visible,
    handleOk,
    handleCancel,
    actionType,
    formItemLayout,
    serviceLabel,
    modifyObj,
    csLabel,
    customerLabel,
    userChange,
    esListOption,
    csListOption,
    custListOption,
    customerFlag,
    csFlag,
    ruleTip,
  } = props;

  const [confirmLoading, setConfirmLoading] = useState(false);
  const [form] = Form.useForm();
  const [csFlagState, setCsFlagState] = useState(csFlag);
  const [customerFlagState, setCustomerFlagState] = useState(customerFlag);
  const onFinish = async values => {
    try {
      setConfirmLoading(true);
      await handleOk(values);
    } catch (e) {
      console.error(e);
    } finally {
      setConfirmLoading(false);
    }
  };
  const onOk = () => {
    form.submit();
  };
  const onCancel = () => {
    handleCancel();
  };
  const csFlagChange = e => {
    setCsFlagState(e.target.checked);
  };
  const customerFlagChange = e => {
    setCustomerFlagState(e.target.checked);
  };
  const checkFlag = () => {
    if (csFlagState || customerFlagState) {
      return Promise.resolve();
    }
    message.warning('服务客服或服务客户至少选一项');
    return Promise.reject(new Error('服务客服或服务客户至少选一项'));
  };

  useEffect(() => {
    // 使用visible防止出现useForm报错
    if (visible) {
      form.setFieldsValue({
        newTskId: modifyObj.tskId,
        creIdList: modifyObj.creIdList,
        custIdList: modifyObj.custIdList,
      });
    }
  }, [modifyObj, visible, form]);

  useEffect(() => {
    if (visible) {
      form.setFieldsValue({
        csFlag,
      });
      setCsFlagState(csFlag);
    }
  }, [csFlag, visible, form]);

  useEffect(() => {
    if (visible) {
      form.setFieldsValue({
        customeFlag: customerFlag,
      });
      setCustomerFlagState(customerFlag);
    }
  }, [customerFlag, visible, form]);
  return (
    <Modal
      forceRender
      title={title}
      visible={visible}
      onOk={onOk}
      confirmLoading={confirmLoading}
      onCancel={onCancel}
      destroyOnClose
    >
      <Form
        form={form}
        preserve="false"
        onFinish={onFinish}
        layout="horizontal"
        {...formItemLayout}
      >
        <Form.Item
          name="newTskId"
          rules={[{ required: true, message: '请选择员工服务人员' }]}
          initialValue={modifyObj.tskId}
          label={<span>{serviceLabel}</span>}
        >
          <HOCSelect
            placeholder="请选择"
            onSelect={userChange}
            style={{ width: '80%' }}
            disabled={actionType === 2}
          >
            {esListOption}
          </HOCSelect>
        </Form.Item>
        <Form.Item
          {...formItemLayout}
          style={{ marginBottom: 0 }}
          label={
            <Form.Item
              noStyle
              name="csFlag"
              rules={[{ validator: checkFlag }]}
              validateTrigger="onSubmit"
              initialValue={csFlagState}
              valuePropName="checked"
            >
              <Checkbox onChange={csFlagChange}>{csLabel}</Checkbox>
            </Form.Item>
          }
        >
          <Form.Item
            name="creIdList"
            rules={[{ required: csFlagState, message: '请选择服务客服' }]}
            initialValue={modifyObj.creIdList}
          >
            <HOCSelect
              placeholder="请选择"
              mode="multiple"
              // onSelect={this.userChange}
              style={{ width: '80%' }}
              disabled={!csFlagState}
              optionFilterProp="children"
              notFoundContent="暂无数据"
            >
              {csListOption}
            </HOCSelect>
          </Form.Item>
        </Form.Item>
        <Form.Item
          {...formItemLayout}
          style={{ marginBottom: 0 }}
          label={
            <Form.Item
              noStyle
              name="customeFlag"
              rules={[{ validator: checkFlag }]}
              validateTrigger="onSubmit"
              initialValue={customerFlagState}
              valuePropName="checked"
            >
              <Checkbox onChange={customerFlagChange}>{customerLabel}</Checkbox>
            </Form.Item>
          }
        >
          <Form.Item
            name="custIdList"
            rules={[{ required: customerFlagState, message: '请选择服务客户' }]}
            initialValue={modifyObj.custIdList}
          >
            <HOCSelect
              placeholder="请选择"
              style={{ width: '80%' }}
              disabled={!customerFlagState}
              mode="multiple"
              optionFilterProp="children"
              notFoundContent="暂无数据"
            >
              {custListOption}
            </HOCSelect>
          </Form.Item>
        </Form.Item>
        <p style={{ fontSize: 14, color: '#ccc' }}>{ruleTip}</p>
      </Form>
    </Modal>
  );
};

export default AutoModal;
